<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="queryInfo.page"
    :page-sizes="[5, 10, 20, 50]"
    :page-size="queryInfo.pagesize"
    layout="prev, pager, next, sizes, jumper"
    :total="total"
    background
  ></el-pagination>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    queryInfo: {
      type: Object,
      required: true
    },
    total: {
      type: Number,
      required: true
    }
  },
  methods: {
    // pagesize 改变 刷新页面
    handleSizeChange (pagesize) {
      this.queryInfo.pagesize = pagesize
      this.$emit('pagination')
    },
    // page 改变 刷新页面
    handleCurrentChange (page) {
      this.queryInfo.page = page
      this.$emit('pagination')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  text-align: right;
  margin-top: 20px;
}
</style>
